配置タブメニューJSはこれだ!

いやいや勉強しましたが、これがよろしいようで・・・タブをクリックしても「cssだけで指定したタブメニュー」のように画面は動かないので、落ち着きます。ただし、スマホ画面ではタブメニューは表示されません。
なおスタイルシートにある「.post ul ほか2つののmargin:は15px 0px 0px 0px;/*★タブメニューのために変更15px 0px 15px 30px */とします。

http://10251.net/jquery-tabmenu
↑ 詳しい説明と更にいくつか仕掛けを追加した解説があります。

↓ 基本の解説はこちらがよろしいようです

http://kachibito.net/web-design/jquery-tab-tutorial.html


 

  • HTML
  • jQuery
  • CSS
  • 補足説明
<div class=”tabmenu”>
<ul class=”tab”>
<li class=”select”>ひとつめのタブ</li>
<li>ふたつめのタブ</li>
<li>みっつめのタブ</li>
</ul>
<div class=”content”>
<div>ひとつめのなかみ</div>
<div class=”hide”>ふたつめのなかみふたつめのなかみ</div>
<div class=”hide”>みっつめのなかみみっつめのなかみみっつめのなかみ</div>
</div>
</div>

※本サイトでは「header.php」に追加します。

$(function() {
$(‘.tab li’).click(function() {
var tabnum = $(‘.tab li’).index(this);
$(‘.content div’).css(‘display’,’none’);
$(‘.content div’).eq(tabnum).css(‘display’,’block’);
$(‘.tab li’).removeClass(‘select’);
$(this).addClass(‘select’)
});
});

.tabmenu{
width: 60%;}.tab{
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;}.tab li{
background: #eee;
cursor: pointer;
display: inline-block;
width: 20%;
padding: .6em;}.tab li.select{
background: #fd9;}.content div{
background: #fd9;
height: 200px;これは最大かもしれません?どうも違うようです。
padding: .6em;}.hide{
display:none;}
こちら4番目。長い文章を入れてみます。
・・・伽藍を構成する主な建物として、俗世間との境界を示す山門、本尊を祀る本堂、仏塔、学習の場である講堂、僧の住居である庫裏、食堂(じきどう)、鐘楼、東司などがある。これらの要素の名称、配置や数は宗派、時代によって異なるが、古くは鎌倉時代の『聖徳太子伝古今目録抄』で金堂、塔、講堂、鐘楼、経蔵、僧坊、食堂の七つがあるのが伽藍、としており、これを七堂伽藍と呼ぶ。また、後に禅宗では七堂伽藍というと、山門、仏殿、法堂、僧堂、庫院(くいん)、東司(または西浄〈せいちん〉)、浴室とされるが、禅宗以外も含め、宗派や時代によってまちまちである。実際には、単に多くの建築物を擁する大寺院を七堂伽藍と呼ぶことも少なくない。
日本に仏教が伝わってきた6世紀前半には、本格的な寺院はなく、宮殿や邸宅の中に小規模な仏堂が建てられたのみであったと想像される。『日本書紀』によれば、崇峻1年(588年)に、百済から寺工や鑪盤博士、瓦博士等が来て最初の本格的伽藍、法興寺(飛鳥寺)を着工したと伝える。飛鳥寺の発掘調査結果によると、回廊で囲まれた区画の中央に仏塔が建ち、これを中金堂・東金堂・西金堂の三金堂で囲む伽藍配置で、高句麗の形式を踏襲しており、中国の三合院配置に起源があると考えられる。
7世紀初頭に発願された大阪の四天王寺や奈良の法隆寺(斑鳩寺)の旧伽藍(若草伽藍)の伽藍配置は、中軸線上に中門・塔・金堂・講堂を南から北へ一直線に並べるもので、回廊は中門左右から出て講堂までの間を結び、塔と金堂を囲んでいる。これを「四天王寺式伽藍配置」と呼び、朝鮮三国時代の百済の寺院に見られる形式である。飛鳥時代に着工された寺院は東海から山陽にかけ40余寺ほどあるが、その大多数は奈良、大阪、京都にあり日本の本格的伽藍の最初のものと考えられる。
このころの伽藍で考えなくてはならないのは、第一に仏塔への配慮であろう。仏塔が1基か、東西2基か、仏塔の建つ位置は回廊の内か外かで、その存在意味が異なる。それはそのまま釈迦の遺骨をどのように扱うかという問題になる。第二に講堂の大きさである。金堂や仏殿は礼拝の目的のための建物であり、インド・中国の祠堂と同様の意味を持つ。しかし、講堂は中国から伝来したもので、研究を目的とした建物であり、回廊上に配置されたのか、回廊外に配置されたのかで研究がどの程度重要視されたのかに関わってくる。(テキストはウィキから引用)幅680px・高さ600pxです。したがって「height: 200px;」はなくてもいいのかな?